<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>hoyo</title>
		
	    <!-- Bootstrap -->
	    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
	    <link href="/hoyo/css/mine.css" rel="stylesheet" />
	    <style>
	    	body{
	    		background-color: #f1f3f7;
	    	}
	    	#data-nav{
	    		margin-bottom: 0px;
	    	}
	    	.user-center-ul{
	    		list-style-type: none;
	    		padding: 0;
	    		margin: 0;
	    	}
	    	.center-icon{
	    		display: inline-block;
	    		height: 48px;
	    		vertical-align: top;
	    	}
	    	.center-icon-c{
	    		margin-top: 13px;
	    		width: 20px;
	    		height:20px;
	    	}
	    	.user-center-left{
	    		background-color: #FFFFFF;
	    		box-shadow: #c7ced1 0 0 5px;
	    		border-top-left-radius: 6px;
	    		border-bottom-left-radius: 6px;
	    		height: 766px;
	    	}
	    	.user-center-ul li{
	    		display: block;
	    		height: 48px;
	    	}
	    	.user-center-ul li a{
	    		display: block;
	    		text-align: center;
	    		cursor: pointer;
	    		color: #000000;
	    	}
	    	.user-center-ul li a:hover{
	    		text-decoration: none;
	    		color: currentcolor;
	    	}
	    	.center-title{
	    		line-height: 48px;
	    		display: inline-block;
	    		width: 56px;
	    		margin-left: 12px;
	    		font-family: "微软雅黑";
	    		font-size: 14px;
	    	}
	    	.center-li-active{
	    		background-color: #00a1d7 !important;
	    		color: #fff !important;
	    	}
	    	.user-center-right{
	    		background-color: #FFFFFF;
	    		box-shadow: #c7ced1 0 0 5px;
	    		padding: 50px 50px 5px 50px;
	    		height: 766px;
	    	}
	    	.touxiang{
	    		width:64px;
	    		height: 64px;
	    	}
	    	.user-info-touxiang{
	    		display: inline-block;
	    	}
	    	.h-div{
	    		font-size: 16px;
	    		font-weight: 700;
	    		color: #222222;
	    		margin-right: 8px;
	    		cursor: default;
	    		font-family: "微软雅黑";
	    		height: 24px;
	    		line-height: 24px;
	    		overflow: hidden;
	    	}
	    	.user-detail{
	    		padding-bottom: 40px !important;
	    		margin-left:20px !important;
	    		margin-right:20px !important;
	    		border-bottom: 1px solid #e5e9ef;	   
	    	}
	    	.clear{
	    		margin: 0;
	    		padding: 0;
	    	}
	    	.user-info{
	    		text-align: center;
	    	}
	    	.exp-progress{
	    		height: 24px;
	    		margin-top: 10px;
	    	}
	    	.user-btn{
	    		font-family: "微软雅黑";
	    		color: #99A2AA;
	    		padding: 0px 10px;
	    	}
	    	.h-intro{
	    		margin-top: 6px;
	    		font-size: 12px;
	    		width: 600px;
	    		height: 20px;
	    		line-height: 20px;
	    		color: #99A2AA;
	    	}
	    	.list{
		      	list-style-type: none;
		      	margin: 0;
		      	padding: 0;
		    }
		    .my-img{
		      	width: 150px;
		      	height: 110px;
		     }
		    .mtitle{
		      	height: 20px;
		      	line-height: 20px;
		      	text-decoration: none;
		      	display: block;
		      	overflow: hidden;
		      	margin-top: 6px;
		      	font-size: 12px;
		      	font-family: "微软雅黑";
		    }
		    .mtitle:hover{
		      	color: #00a1d6;
		    }
		    .data-md-5{
	    		width:20%;
	    		padding-bottom: 15px;
	    		padding-left: 0px;
	    	}
		    .v-info{
		      	padding-top: 12px;
		      	font-size: 12px;
		      	font-family: "微软雅黑";
		      	color: #99A2AA;
		    }
		    .v-info-icon{
		      	margin-right: 10px;
		      	margin-left: 5px;
		    }
		    .v-info-uploader{
		      	margin-top: 6px;
		    }
		    .mine-movie{
		    	margin: 20px 20px;
		    	padding-bottom: 20px;
		    	border-bottom: 1px solid #e5e9ef;	
		    }
		    .mine-movie-title{
		    	display: inline-block;
		    	margin-right: 10px;
		    }
		    .mine-movie-icon{
		    	width: 24px;
		    	height: 24px;
		    	margin-top: 3px;
		    }
		    .upload-movie-header{
		    	height: 30px;
		    }
		    .upload-movie-title{
		    	height:30px;
		    	line-height: 30px;
		    	display: inline-block;
		    	font-family: "微软雅黑";
		    	vertical-align: top;
		    }
		    .movie-title-info{
		    	height:30px;
		    	line-height: 30px;
		    	font-family: "微软雅黑";
		    	font-size: 12px;
		    	color: #99A2AA;
		    	display: inline-block;
		    	vertical-align: top;
		    }
		    .mine-btn{
		    	vertical-align: top;
		    	font-size: 12px;
		    	color: #99A2AA;
		    }
		    .right{
		    	float: right;
		    	margin-right: 50px;
		    }
		    .upload-movie-header{
		    	margin-top: 10px;
		    	margin-bottom: 20px;
		    }
		    .telephone-icon{
		    	width: 60px;
		    	height: 60px;
		    }
		    .icon-banner{
		    	vertical-align: top;
		    	display: inline-block;
		    	margin: 10px 15px;
		    }
		    .icon-intro{
		    	display: inline-block;
		    	font-family: "微软雅黑";
		    	margin-top: 10px;
		    }
		    .table-title{
		    	display: inline-block;
		    	width: 460px;
		    	height: 30px;
		    	line-height: 30px;
		    	overflow: hidden;
		    }
		    #upload-table tr td{
		    	font-family: "微软雅黑";
		    	height: 30px;
		    	line-height: 30px;
		    	overflow: hidden;
		    	font-size: 14px;
		    }
		    .mine-safe{
		    	margin: 20px 20px;
		    	padding-bottom: 20px;
		    }
		    .glyphicon{
		    	margin-left: 6px;
		    }
		    .upload-movie-div{
		    	min-height: 250px;
		    }
		    .none-data{
		    	text-align: center;
		    	padding-top: 60px;
		    }
		    .none-data p{
		    	padding-bottom: 10px;
		    }
		    
		    /*
		     * 
		     */
		    .list{
				font-size: 12px;
				font-family: "微软雅黑";
		    }
		    .pl-info{
		    	width: 100%;
		    	border-bottom: 1px solid #E5E9EF;
		    	height: 80px;
		    	line-height: 80px;
		    }
		    .pli-l{
		    	width: 35%;
		    	display: inline-block;
		    	height: 80px;
		    	line-height: 80px;
		    	font-size: 14px;
		    	color: #222222;
		    }
		    .pli-l{
		    	width: 35%;
		    	display: inline-block;
		    	height: 80px;
		    	line-height: 80px;
		    	font-size: 14px;
		    	color: #222222;
		    }
		    .pli-m{
		    	width: 40%;
		    	display: inline-block;
		    	height: 80px;
		    	line-height: 80px;
		    	font-size: 12px;
		    	color: #6D757A;
		    }
		    .pli-r{
		    	width: 20%;
		    	display: inline-block;
		    	height: 80px;
		    	line-height: 80px;
		    }
		    .pli-r a{
		    	font-size: 12px;
		    	color: #00A1D6;
		    }
		    .pli-r a:hover{
		    	text-decoration: none;
		    	color: #00A1D6;
		    }
		    .pl-icon{
		    	width:30px;
		    	height: 22px;
		    	vertical-align: middle;
		    	margin-bottom: 4px;
		    }
		    
		    .upload-icon{
				display: block;
				width:250px;
				height: 250px;
				overflow: hidden;
				border-radius: 3px;
				box-shadow: #c7ced1 0 0 3px;
				margin-bottom: 15px;
				line-height: 250px;
				text-align: center;
		    }
		    #icon-box{
		    	width: 100%;
		    	text-align: center;
		    	margin-top: 100px;
		    }
		    .upload-box{
		    	width: 250px;
		    	margin: 0 auto;
		    }
		    .msg{
		    	color: #E40C0C;
		    	margin-top: 10px;
		    	font-size: 10px;
		    	font-family: "微软雅黑";
		    }
		    .btn-sm{
		    	padding: 5px 36px;
		    }
		    .intro p{
		    	font-size: 12px;
		    	font-family: "微软雅黑";
		    	color: #666;
		    }
		    .upload-icon{
				display: block;
				width:250px;
				height: 250px;
				overflow: hidden;
				border-radius: 3px;
				box-shadow: #c7ced1 0 0 3px;
				margin-bottom: 15px;
				line-height: 250px;
				text-align: center;
		    }
		    #icon-box{
		    	width: 100%;
		    	text-align: center;
		    	margin-top: 100px;
		    }
		    .upload-box{
		    	width: 250px;
		    	margin: 0 auto;
		    }
		    .msg{
		    	color: #E40C0C;
		    	margin-top: 10px;
		    	font-size: 10px;
		    	font-family: "微软雅黑";
		    }
		    .btn-sm{
		    	padding: 5px 36px;
		    }
		    .intro p{
		    	font-size: 12px;
		    	font-family: "微软雅黑";
		    	color: #666;
		    }
		    .display-none{
		    	display: none;
		    }
		    .display-block{
		    	display: block;
		    }
		    .breadcrumb{
		    	background-color: #FFFFFF;
		    }
		    .breadcrumb .active{
		    	color: #00BDEF;
		    }
		    #mine-like{
		    	margin-left:15px;
		    	margin-right: 0px;
		    }
	    </style>
	</head>
	<body>
		
			
		<div id="data-nav" class="navbar">
			<div class="container">
		  	<div class="navbar-header">
		      <a class="navbar-brand" href="/hoyo/">
		      	<img src="/hoyo/img/logo.png" class="data-img"/>
		      	<span class="data-span">主页</span>
		      </a>
		    </div>
		
	      <ul id="contributor" class="nav navbar-nav navbar-right">
	      	<li>
	      		<a class="data-user" href="/hoyo/user/personalCenter">
	      			<img th:src="${session.userInfo.icon}" class="data-img img-circle" />
	      			<span class="nav-user-name" th:text="${session.userInfo.nickname}">iscream</span>
	      		</a>
	      	</li>
	        <li class="dropdown">
	          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
	      	</li>
	      </ul>
		  </div>
		</div>
		
		<div class="container-fluid" style="background-color: #00a0d8;margin-bottom: 50px;">
			<div class="container">
				<img src="/hoyo/img/login-bc.png" />
			</div>
		</div>
		<div class="container">
			<div class="col-lg-2 clear">
				<div class="user-center-left">
					<ul class="user-center-ul">
						<li>
							<a href="/hoyo/user/personalCenter">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-shouye"></use>
									</svg>
								</div>
								<span class="center-title">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span>
							</a>
						</li>
						<li>
							<a href="/hoyo/user/personInfo">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-geren"></use>
									</svg>
								</div>
								<span class="center-title">我的信息</span>
							</a>
						</li>
						<li >
							<a href="/hoyo/user/modifyicon">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-8"></use>
									</svg>
								</div>
								<span class="center-title">我的头像</span>
							</a>
						</li>
						<li class="center-li-active">
							<a href="/hoyo/user/userLikeCatalog">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-shoucang2"></use>
									</svg>
								</div>
								<span class="center-title">我的收藏</span>
							</a>
						</li>
						<li>
							<a href="/hoyo/user/safeCenter">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-anquan"></use>
									</svg>
								</div>
								<span class="center-title">账号安全</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-lg-10 clear">
				<div class="user-center-right">
					<div>
						<ol class="breadcrumb">
						  <li class="active">我的收藏</li>
						</ol>
					</div>
					<div class="row" id="mine-like" style="display:none;">
						<ul class="list">
							<li v-for="catalog of catalogs">
							 	<div class="col-lg-2 data-md-5">
							 		 <a :href="'/hoyo/catalog/'+catalog.id"  target="_blank" >
							 		 		<img :src="catalog.catalogPoster" class="img-rounded my-img"/>
							 		 </a>
							 		 <a :href="'/hoyo/catalog/'+catalog.id" target="_blank" class="mtitle" :title="catalog.catalogName">
							 		 		{{catalog.catalogName}}
							 		 </a>
							 	</div>
							</li>
						</ul>
  					</div>
				</div>
			</div>	
		</div>
		
	</body>
	<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/vue1.0.26.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
    <script type="text/javascript" src="/hoyo/js/plupload/moxie.js"></script>
	<script type="text/javascript" src="/hoyo/js/plupload/plupload.dev.js"></script>
	<script type="text/javascript" src="/hoyo/js/plupload/i18n/zh_CN.js"></script>
    <script src="/hoyo/js/qiniu.js"></script>
    <script th:inline="javascript">
    	$(function(){
    	
	    	var VM = new Vue({
	    		el:"#mine-like",
	    		data:{
	    			catalogs: [[${catalogs}]],
	    		},
	    		created:function(){
	    			$("#mine-like").show();
	    		}
	    	});
    	});
    </script>
</html>
